<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getArticleAll, findByTitle, deleteById, updateStatus } from '../../api/article'
import dayjs from 'dayjs'
import router from '../../router'

const tableData = ref<any[]>([])
const getAll = async () => {
   const res = await getArticleAll()
   tableData.value = res.data.map((item) => {
      return {
         ...item,
         createDate: dayjs(item.createDate).format('YYYY-MM-DD'),
         username: item.user.username,
         category: item.category.name
      }
   })
}

const titile = ref('')
const getOne = async () => {
   const res = await findByTitle(titile.value)
   tableData.value = res.data.map((item) => {
      return {
         ...item,
         createDate: dayjs(item.createDate).format('YYYY-MM-DD'),
         username: item.user.username,
         category: item.category.name
      }
   })

   titile.value = ''
}

const del = async (index: number, row: ArticelModel) => {
   await deleteById(row.id)
   tableData.value.splice(index, 1)
}

const toDetail = (index: number, row: ArticelModel) => {
   console.log(index);
   router.push({ name: 'ArticleDetail', params: { id: row.id } })
}

const updateStatuses = (index: number, row: ArticelModel, status: number) => {
   if (row.status == 1) return index
   updateStatus(row.id, status).then(() => {
      getAll()
   })
}

onMounted(() => {
   getAll()
})
</script>

<template>
   <div class="mt-4 p-5">
      <el-input v-model="titile" style="max-width: 600px" placeholder="请输入文章标题" class="input-with-select">
         <template #append>
            <el-button type="primary" @click="getOne" :icon="Search" />
         </template>
      </el-input>
      <el-button class="ml-4" @click="getAll">重置</el-button>
   </div>

   <div class="table p-5 w-full">
      <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="createDate" label="创建日期" width="180" />
         <el-table-column prop="title" label="标题" width="180" />
         <el-table-column prop="category" label="类别" />
         <el-table-column prop="username" label="作者" />
         <el-table-column fixed="right" label="操作" width="200">
            <template #default="scope">
               <el-button link type="primary" size="" @click="toDetail(scope.$index, scope.row)">详情</el-button>
               <el-button link type="danger" size="small" @click="del(scope.$index, scope.row)">删除</el-button>
               <el-button link type="success" size="small" @click="updateStatuses(scope.$index, scope.row, 1)">{{
                  scope.row.status == 1 ? '已通过' : '通过'
               }}</el-button>
               <el-button link type="warning" size="small" v-if="scope.row.status !== 1"
                  @click="updateStatuses(scope.$index, scope.row, 2)">{{ scope.row.status == 2 ? '已拒绝' : '拒绝'
                  }}</el-button>
            </template>
         </el-table-column>
      </el-table>
   </div>
</template>
